<template>
	<view class="box">
		<!-- tab切换 -->
		<div @click="gotoSearch">
			<uv-search placeholder="请输入搜索内容" v-model="keyword"></uv-search>
		</div>

		<view class="tabMain">
			<view class="box1">
				<view class="tabBox">
					<view style="width: 1000rpx;" v-for="(item,index) in tabList" :key="index">
						<view @click="tabClick(item.id)" class="titStyle">{{item.departmentName}}</view>
					</view>
				</view>
			</view>

		</view>
		<view @click="goTo(item.pid)" style="margin: 25rpx;" v-for="(item, index) in tabChildren" :key="index"
			class="ellipsis-multi-line">
			<view class="title-text">
				<h1>{{item.title}}</h1>
			</view>
			{{ item.texts }}
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [],
				tabChildren: [],
				defaultTabId: null, // 添加一个默认的 tabId

			}
		},
		onLoad() {
			this.getTab();
		},
		methods: {
			getTab() {
				uni.request({
					url: "http://172.27.6.151:32112/api/get/knowledgeBaseData"
				}).then(res => {
					console.log("tab", res.data.data);
					if (res.data.code == 200) {
						this.tabList = res.data.data
						this.defaultTabId = this.tabList[0]?.rank; // 选择第一个 tab 作为默认选项
						if (this.defaultTabId) {
							this.tabClick(this.defaultTabId); // 自动加载数据
						}
					}
				})

			},
			tabClick(id) {
				console.log(id);
				uni.request({
					url: "http://172.27.6.151:32112/api/get/PatientData",
					method: "get",
					data: {
						id: id
					}
				}).then((res) => {
					console.log(res);
					console.log("病友数据", res.data.data[0].childer)
					this.tabChildren = res.data.data[0].childer
					uni.setStorageSync('searchdatas', res.data.data[0].childer)
				})
			},
			goTo(id) {
				console.log(id);
				//进入详情
				uni.navigateTo({
					url: `/pages/EmergencyDepartment/EmergencyDepartment?id=${id}`
				})
			},
			gotoSearch() {
				//跳转搜索页
				uni.navigateTo({
					url: "/pages/Search/Search"
				})
			}
		}
	}
</script>

<style>
	.title-text {
		font-weight: 700;
	}

	.ellipsis-multi-line {
		display: -webkit-box;
		/* 使用 WebKit box 模型 */
		-webkit-box-orient: vertical;
		/* 垂直排列子元素 */
		overflow: hidden;
		/* 隐藏超出范围的文字 */
		text-overflow: ellipsis;
		/* 使用省略号表示超出部分 */
		-webkit-line-clamp: 3;
		/* 显示的行数 */
		line-height: 1.5;
		/* 行高 */
		height: calc(1.5em * 3);
		/* 高度应为行高乘以显示的行数 */
		border-bottom: 1rpx solid #ccc;
	}

	.tabMain {
		width: 741rpx;
		display: flex;
	}

	.box1 {
		width: 741rpx;
		height: 100rpx;
		color: cadetblue;
		overflow-y: scroll;
	}

	.tabBox {
		width: 1000rpx;
		height: 100rpx;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #ccc;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 30rpx
	}

	.titStyle:hover {
		color: red;
		font-weight: 600;
	}
</style>